<template>
	<view>
		<view style="margin-top: 50rpx;font-size: 46rpx;font-weight: bold;margin-left: 50rpx;">验证码登录</view>
		<view class="cflex-c" style="justify-content: center;align-items: center;">
			<view class="cflex-r" style="border-bottom: 1rpx solid rgb(235,235,235);width: 600rpx;margin-top: 160rpx;
			align-items: center;font-weight: bold;">
				<view style="display: inline-block;width:160rpx;">手机号</view>
				<input v-model="phone" type="number" style="font-weight: bold;width: 300rpx;"
				maxlength="11"
				/>
			</view>
			<view class="cflex-r" style="border-bottom: 1rpx solid rgb(235,235,235);width: 600rpx;margin-top: 70rpx;justify-content: space-between;">
				<view class="cflex-r" style="align-items: center;font-weight: bold;">
					<view style="display: inline-block;width:160rpx;">验证码</view>
					<input v-model="code" type="number" style="width: 300rpx;"
					/>
				</view>
				<view v-show="showText" style="color: rgb(251,133,0);font-weight: bold;" @tap="getCode">获取</view>
				<view v-show="!showText">{{second}} s</view>
			</view>
			<!-- <view class="jiaru" @click="jairu">加入我们</view> -->
			<view class="cflex-c" style="width: 600rpx;justify-content: center;align-items: center;margin-top: 270rpx;background-color: #2869FE;padding: 25rpx 0;border-radius: 50rpx;font-weight: bold;color: #fff;" @tap="login">登录</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone:'',
				code:'',
				showText:true,
				second: 60,
			}
		},
		methods: {
			jairu(){
				uni.navigateTo({
					url:'/pages/login/addjiaru/addjiaru'
				})
			},
			getCode() {
				if(this.phone.length != 11){
					uni.showToast({
						title:'手机号必须为11位',
						icon:'none',
					})
					return
				}else {
					this.showText = false;
					var interval = setInterval(() => {
					   if(this.second>0){
						   --this.second
					   }else {
						   this.showText = true
						   return;
					   }
					}, 1000)
					setTimeout(() => {
					   clearInterval(interval)
					   this.second = 60
					   this.showText = true;
					}, 60000)
					this.$request("worker/getLoginCode",{phone:this.phone}).then(res=>{
						// //console.log("work",res)
					})
				}
			},
			login(){
				// this.phone=13000000000;
				this.$request("worker/login",{phone:this.phone,code:this.code}).then(res=>{
					// //console.log("set")
					if(res.code==0){
						this.$store.commit('setToken',res.msg);
						uni.reLaunch({
							url:'../../pages/tab1'
						})
					}
				})
			}
		}
	}
</script>

<style>
  page{background-color: white;;}
  .jiaru{
	  width:600rpx;
	  text-align: right;
	  margin-top: 30rpx;
	  font-size: 28rpx;
	  color: #11A5FA;
  }
</style>
